<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <link href="../../css/mui.min.css" rel="stylesheet" />
  <link rel="stylesheet" type="text/css" href="../../fonts/iconfont.css" />
  <link rel="stylesheet" type="text/css" href="../../css/timecheck.css" />
  <script>
    var width =window.localStorage.getItem('width');
    document.documentElement.style.fontSize =  width ? width/6.4+  'px' :'55px';
  </script>
  <style>
    .titleDiv{
      width: 100%;
      border-top:1px solid #ccc ;
      background-color: white;
      overflow: hidden;
    }
    .titleDiv p{
      height: 0.5rem;
      line-height: 0.5rem;
      color:black;
      font-size: 0.2rem;
    }
    .titleDiv>p:first-child{
      float: left;
      margin:0 0 0 0.2rem;
    }
    .titleDiv>p:last-child{
      float: right;
      margin: 0 0.2rem 0 0;
    }

    .storeChoose{
      width:100%;
      /*border: 1px solid #ccc;*/
      font-size: 0.22rem;
      text-align: center;
      overflow: hidden;
      padding: 0.25rem 3%;
      /*background-color:#F7F7F7;*/
    }
    .storeChoose span{
      display: inline-block;
      width: 33%;
      padding: 0.06rem 0;
      float: left;
      border: 1px solid #ccc;
      font-size: 0.2rem;
      background-color:white;
    }
    .storeChoose span:nth-child(2){
      border-right: none;
      border-left: none;
    }
    .storeChoose .default{
      background-color: #ccc;
    }
    /*销售总览*/
    .salesPandect{
      width: 100%;
    }
    .dataHeader {
      width: 100%;
      /*background-color: white;*/
      padding: 0.2rem 0;
      overflow: hidden;
    }
    .setMeal ,.openCard{
      background-color: #F9F9F9;
      width: 48%;
      float: left;
      border-radius: 0.2rem;
      text-align: center;
      padding: 0.05rem 0;
    }
    .setMeal{
      margin:0 2% 0 1%;
    }
    .setMeal p ,.openCard p{
      margin: 0.05rem 0 0;
      font-size: 0.22rem;
      color:black;
    }
    .setMeal>p:first-child ,.openCard>p:first-child{
      font-size: 0.26rem;
    }
    .setMeal>p:nth-child(2) ,.openCard>p:nth-child(2){
      font-size: 0.22rem;
    }
    .floatDiv{
      width: 100%;
      padding: 0.05rem 0.2rem ;
      overflow: hidden;
      margin-top: 0.1rem;
    }
    .floatDiv .floatItem{
      width: 50%;
      float: left;
    }
    .floatDiv>div:first-child{
      border-right: 1px solid #ccc;
    }
    .floatDiv .floatItem p{
      margin: 0 0 0.05rem 0;
    }


    table {
      font-size: 0.22rem;
      width: 100%;
      text-align: center;
      /*margin-top: 0.1rem;*/
      /*background-color: white*/
    }

    table tr td {
      padding: 0.1rem 0;
      height: 0.8rem;
      /*display: inline-block;*/
      /*line-height: 0.65rem;*/
    }
    table,
    tbody,td div{
      text-align: center;
      font-size: 0.2rem;
    }
    td span{
      display: inline-block;
      text-align: left;
      vertical-align: middle;
    }
    .table-box{
      width: 100%;
      font-size: 0.2rem;
      text-align: center;
      padding-bottom: 1rem;
      margin-top: 0.04rem;
    }
    .tab-head {
      width: 100%;
      background-color: #FFFFFF;
      line-height: 0.5rem;
    }
    .light {
      color: #8e8a8a;
    }
    .bglight {
      background-color: #FFFFFF;
    }


    .tableDiv{
      width: 100%;
      font-size: 0.22rem;
      background-color: #EEEEEE;
      padding-bottom: 1rem;
    }
    .tableItem{
      padding-top: 0.2rem;
    }
    .mealName{
      display: inline-block;
      width: 100%;
      height: 0.3rem;
      line-height: 0.32rem;
      background-color: white;
      color:#ED7D31;
      padding-left: 0.2rem;
      font-size: 0.2rem;
      position: absolute;
      bottom:0.05rem;
    }
    .triangle{
      display: inline-block;
      border-bottom: 0.3rem solid transparent;
      border-left: 0.3rem solid transparent;
      border-right: 0.3rem solid #EEEEEE;
      position: absolute;
      bottom:0.07rem;
      right: 3.8rem;
    }
    .titleData{
      width: 3.8rem;
      height: 0.3rem;
      line-height: 0.3rem;
      position: absolute;
      bottom:0.07rem;
      right: 0;
      background-color: #EEEEEE;
      text-align: right;
      font-size: 0.2rem;
    }
    .titleData span{
      display: inline-block;
      margin-right: 0.1rem;
    }
    .mealDetail{
      width: 100%;
      /*background-color: #F7F7F7;*/
      padding-top: 0.2rem;
      margin-top: 0.05rem
    }
    .mealDetail .name{
      width: 70%;
      margin: 0 auto;
      background-color: white;
      color:#ED7D31;
      text-align: center;
      padding: 0.05rem 0;
      border-radius: 0.3rem;
    }
    .flex2{
      display: flex;
      justify-content:space-around;
      position: fixed;
      bottom: 0;
      width: 100%;
      background-color: #f7f7f7;
      padding: 0.3rem 0;
    }
    .flex2 p{
      margin: 0;
      height: 100%;
      line-height: 100%;
      font-size: 0.2rem;
      color:black;
    }

    .mui-scroll-wrapper {
      bottom: 40px;
    }
    .mui-scroll {
      touch-action: none;
    }

    .mui-pull-bottom-pocket {
      visibility: visible;
    }

    .mui-pull-bottom-pocket .mui-pull-loading {
      visibility: visible;
    }



  </style>
</head>

<body>
<div id="app" class="mui-content">
  <div class="mui-scroll-wrapper">
    <div class="mui-scroll">
      <time-check :type="3" :names='names' :dateType="dateType"  :actnum="actnum" :fromdate="fromDate" :todate='toDate' :top="top"></time-check>
      <div class="table-box">
        <table style="width: 100%">
          <tr class="tab-head ">
            <td style="width:20%;text-align: left;padding-left: 0.5rem">回收奖品</td>
            <td style="width:15%;position: relative"  @click="changeSort(1)">回收个数<img src="../../images/dowmArrow.png" v-show="sortType === 1" alt="" style="width: 0.2rem;position: absolute;bottom:0.3rem;margin-left: 0.05rem"></td>
            <td style="width:15%;position: relative"  @click="changeSort(2)" class="light">参与人数<img src="../../images/dowmArrow.png" v-show="sortType === 2" alt="" style="width: 0.2rem;position: absolute;bottom:0.3rem;margin-left: 0.05rem"></td>
            <td style="width:15%;position: relative"  @click="changeSort(3)" class="light">新增积分<img src="../../images/dowmArrow.png" v-show="sortType === 3" alt="" style="width: 0.2rem;position: absolute;bottom:0.3rem;margin-left: 0.05rem"></td>
          </tr>
          <!--:class="{bglight:index%2===1}"-->
          <tr v-for="(item,index) in tableList" :class="{bglight:index%2===1}">
            <td style="width:20%">
              <div style="height: 100%;width: 100%;display: flex;align-items: center">
                <img style="width: 0.6rem;margin: 0 0.05rem 0 0.2rem ;color: black " :src="config.imgPath + item.goodsImg" alt="">
                <span style="vertical-align:middle;width:1.2rem;text-align: left; ">{{item.goodsName}}</span>
              </div>
            </td>
            <td style="width:15%"><div><span >{{item.goodsNum}}</span></div></td>
            <td style="width:15%"><div><span class="light">{{item.peopleNum}}</span></div></td>
            <td style="width:15%"><div><span class="light">{{item.scoreNum}}</span></div></td>
          </tr>



        </table>
        <p v-show="tableList.length ===0 " style="width: 100%;text-align: center;height: 0.5rem;line-height: 0.8rem">
          暂无数据
        </p>
        <!--加载中-->
        <div class="mui-pull-bottom-pocket" v-show='isLoading'>
          <div class="mui-pull" >
            {{loadingText}}
          </div>
        </div>
      </div>

    </div>
  </div>

  <div  >
    <div class="flex2">
      <p >回收个数：{{originalData.totalGoodNum}}个</p>
      <p >参与人数：{{originalData.totalPeopleNum}}人</p>
      <p >新增积分：{{originalData.totalScoreNum}}</p>
    </div>

  </div>
</div>

</div>
<script src="../../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../common/timeCheck2.js" ></script>
<script src="../../js/mui.min.js"></script>
<script src="../../config.js"></script>
<script type="text/javascript">
  mui.init()
  var vm = new Vue({
    el: '#app',
    data: function() {
      return {
        currentShopObj:{},
        names: {
          leftName: '吧台销售额',
          rightName: false
        },
        top:'1rem',
        storeId:'',
        storeName:'',
        fromDate:'',
        toDate:'',
        actnum:'',
        dateType:'',

        tableList:[],
        pageNo:1,  //当前页
        pageSize:100,
        pageTotal:'', //总共 几页
        loadingText: '加载中...',
        isLoading:false,
        originalData:'',
        sortType:1,   //列表排序  1.按个数  2. 人数 3.积分

      }
    },
    created:function(){

    },
    mounted: function() {
      var vm = this;
      mui.plusReady(function() {
        vm.receiveParams();
        vm.bindEvent();

      });
    },
    methods: {
      receiveParams: function() {
        var sf = plus.webview.currentWebview();
        this.currentShopObj = sf.currentShopObj;
        this.storeId = sf.storeId;
        this.storeName = sf.storeName;
        this.fromDate = sf.fromDate;
        this.toDate = sf.toDate;
        this.actnum = sf.actnum;
        this.dateType = sf.dateType;
      },
      bindEvent: function () {
        var vm = this
        mui('.mui-scroll-wrapper').scroll({
          scrollY: true,
          bounce: true,
          deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006，
        });
        //滚动监听
        document.querySelector('.mui-scroll-wrapper').addEventListener('scrollend', function (e) {
          if (e.detail.y <= e.detail.maxScrollY) {
            if (vm.isLoading === false) {
              if (++vm.pageNo <= vm.pageTotal) {
                vm.loadingText = '加载中...'
                vm.loadData()
              } else {
                vm.loadingText = '没有更多'
              }
            }
          }
        });

//        //监听键盘事件
        window.onresize = function () {
          mui('.mui-scroll-wrapper').scroll().element.scrollTop = 0;
        }
      },
      loadData:function(){
        var vm=this;
        vm.isLoading = true
        var  data={
          "storeId":vm.storeId,
          "startDate":new Date(vm.fromDate).format('yyyyMMdd'),
          "endDate":new Date(vm.toDate).format('yyyyMMdd'),
          "pageNo":vm.pageNo,
          "pageCount":vm.pageSize,
          "excType":2,  //1  积分换娃娃  2. 娃娃换积分
          type:vm.sortType
        };
        console.log(JSON.stringify(data))
        config.ajax({
          url: '/scores/appScoreExcDetails',
          data: {
            "storeId":vm.storeId,
            "startDate":new Date(vm.fromDate).format('yyyyMMdd'),
            "endDate":new Date(vm.toDate).format('yyyyMMdd'),
            "pageNo":vm.pageNo,
            "pageCount":vm.pageSize,
            "excType":2,  //1  积分换娃娃  2. 娃娃换积分
            type:vm.sortType
          },
          success:function(res){
            console.log(JSON.stringify(res))
            if(res.result===1){
              vm.originalData=res.appScoreExcDetails;
              if (vm.pageNo === 1) {
                vm.tableList= res.appScoreExcDetails.excDetails;
              } else {
                vm.tableList = vm.tableList.concat(res.appScoreExcDetails.excDetails)
              }
              vm.pageNo= Number(res.appScoreExcDetails.pageNo) ;
              vm.pageTotal= Math.ceil(res.appScoreExcDetails.totalCount/vm.pageSize) ;
            }else{
              mui.toast(res.errormsg)
            }
            setTimeout(function () {
              vm.isLoading = false
            }, 500)

          },
          error:function(res){
            mui.toast(res.errormsg)
            setTimeout(function () {
              vm.isLoading = false
            }, 500)
          },
        })
      },
      changeSort:function(sortType){
        if(this.sortType !==sortType){
          this.pageNo=1;
          this.sortType=sortType;
          this.loadData()
        }
      },

    },
    watch: {
      fromDate: function() {
        this.pageNo=1;
        this.loadData()
      },
    }
  })
</script>
</body>

</html>